<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSX练习</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>
    .new {
        margin: auto;
        width: 1200px;
      
    }
    .imgs{
        display: block;
        width: 700px;
       margin: auto;
    }
</style>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    let data = {
        title: "中国特色强军之路的时代答卷",
        content: `党的十八大以来，中国特色社会主义进入新时代，国防和军队建设也进入新时代。
                人民军队这十年，是浴火重生的十年，是强军兴军的十年，是阔步迈向世界一流的十年。
                进入新时代，习近平主席站在统筹“两个大局”的战略高度，鲜明提出党在新时代的强军目标，确立新时代军事战略方针，制定到2027年实现建军一百年奋斗目标、到2035年基本实现国防和军队现代化、到本世纪中叶全面建成世界一流军队的国防和军队现代化新“三步走”战略，引领人民军队在中国特色强军之路上阔步前行，为实现中华民族伟大复兴提供了坚强有力的战略支撑。`,
        image: "https://img-xhpfm.xinhuaxmt.com/News/202209/dcc1c14968f646d48caec00fcdc8acb8.jpg?x-oss-process=image/resize,w_1000/auto-orient,1/quality,Q_80"
    }


    let vdom = <div className="new">
        <h2 style={{ color: "red" ,textAlign:"center"}} >{data.title}</h2>
        <hr />
        <p style={{textIndent:"2em",lineHeight:"30px"}}>{data.content}</p>
        <img  className="imgs" src={data.image} alt="" />
    </div>
    ReactDOM.render(vdom, document.getElementById("root"))






































    /* 
        JSX注意点
            1. 不能用引号包裹,可以用 (小括号) 包裹
            2. JSX 与 js  拼接式,需使用 {}
            3. JSX 设置 class 时,须使用 className
            4. JSX 设置 style 时,须使用 {{color:"red",textAlign:"center",fontSize:"30px"}}   形式, css样式 多单词 须使用 小驼峰形式
            5. JSX 必须要有根标签
            6. JSX 中的单标签必须闭合,  例: <img/> <hr/> <br/> <input/> 等,或者<img><img/>形式
            7. JSX 中的标签名
                (1) 小写字母开头,则到HTML中找对应的标签,找到则创建,找不到则报错;
                (2) 大写字母开头,则到React中找对用的组件,找到则创建,找不到则报错;
                (3) 如果编写的html标签,则标签名首字母[一定要小写];如果编写的时React组件,则标签名首字母[一定要大写]
    */
</script>

</html>